import Collapse from "@material-ui/core/Collapse";
import Divider from "@material-ui/core/Divider/Divider";
import Grid from "@material-ui/core/Grid";
import * as React from "react";
import ActionBar from "./ActionBar";


export const Info = (props: any) => {
    const {expands, children, detail, showDivider} = props;
    return <Grid container={true} className={"flex-center"}>
        <ActionBar {...props}>
            {children}
        </ActionBar>
        <Grid container={true} item={true} xs={12}>
            <Collapse in={expands} timeout="auto" unmountOnExit={true} style={{width: "100%"}}>
                <div className={"info-detail padding-v"}>
                    {
                        detail
                    }
                </div>
            </Collapse>
        </Grid>
        {showDivider ? <Grid item={true} xs={12} style={{margin: "12px 0 12px 0"}}><Divider/></Grid> : null}
    </Grid>;
};

export default Info;